<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			单价：<input type="number" v-model="price"><br>
			数量：<input type="number" v-model="count"><br>
			总价：{{price*count}}<br>
			<!-- 总价：{{getTotal()}}<br>
			总价：{{total}}<br> -->
			<hr >
			<input v-model="text" type="text">
			<hr >
			身高:<input v-model="h" type="number">m <br>
			体重:<input v-model="w" type="number">kg <br>
			BMI:{{getBMI()}} 方法<!-- 体重/身高的平方 --><br>
			{{bmi}}
			<hr >
			<span v-if='bmi<18.5'>你的体脂偏低</span>
			<span v-else-if='bmi>23.9'>你的体脂偏高</span>
			<span v-else>你的体脂正常</span>
			正常范围：18.5~23.9
		</div>
		<script>
			Vue.createApp({
				data(){
					return{
						price:5,
						count:1,
						text:'hello vue',
						h:'',
						w:''
					}
				},
				computed:{
					bmi(){
						return (this.w/(this.h*this.h)).toFixed(2)
					}
				},
				methods:{
					getBMI(){
						return (this.w/(this.h*this.h)).toFixed(2)
					}
				}
				
			}).mount('#app')
		</script>
	</body>
</html>
